<div id="divMainContent">
    <style>
        #inputCliente{
            width: 400px;
        }
    </style>

    <h1>Reservaciones</h1>

    <br/>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-inline">
                <div class="form-group">
                    <label class="control-labe" for="inputCliente">Cliente</label>
                    <br/>
                    <div id="inputCliente-message"></div>
                    <input type="text" class="form-control" id="inputCliente" valueId="0" placeholder="Nombre Completo [usuario]">
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="inputEstado">Estado</label>
                    <br/>
                    <div id="inputEstado-message"></div>
                    <select class="form-control" id="inputEstado" placeholder="Tipo">
                        <option value="RESERVADO">Reservado</option>
                        <option value="CONFIRMADO">Confirmado</option>
                        <option value="CANCELADO">Cancelado</option>
                        <option value="FINALIZADO">Finalizado</option>
                    </select>
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="buttonBuscar">&nbsp;</label>
                    <br/>
                    <button type="button" class="btn btn-primary" id="buttonFiltrar"><span class="glyphicon glyphicon-filter"></span> Filtrar</button>
                </div>

            </div>
        </div>
    </div>

    <div id="divData">
        <table class="table table-bordered" id="tableList">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Edificio</th>
                    <th>Tipo Habitacion</th>
                    <th>Numero Habitacion</th>
                    <th>Cliente</th>
                    <th>Fecha Entrada</th>
                    <th>Fecha Salida</th>
                    <th>Accion</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $i = 0;
                foreach ($decReservacionTable as $object) {
                    $decReservacion = new DecReservacion();
                    $decReservacion = (object) $object;

                    $decPersona = new DecPersona();
                    $decPersona = (object) $decReservacion->getDecPersona();

                    $decReservacionHabitacionTable = $decReservacion->getDecReservacionHabitacion();

                    foreach ($decReservacionHabitacionTable as $object) {
                        $decReservacionHabitacion = new DecReservacionHabitacion();
                        $decReservacionHabitacion = (object) $object;

                        $decHabitacion = new DecHabitacion();
                        $decHabitacion = (object) $decReservacionHabitacion->getDecHabitacion();

                        $decEdificio = new DecEdificio();
                        $decEdificio = $decHabitacion->getDecEdificio();

                        $decHabitacionTipo = new DecHabitacionTipo();
                        $decHabitacionTipo = (object) $decHabitacion->getDecHabitacionTipo();

                        $i++;

                        echo "<tr>";
                        echo "<td>{$i}</td>";
                        echo "<td>{$decEdificio->getEdiEdificio()}</td>";
                        echo "<td>{$decHabitacionTipo->getHatTipo()}</td>";
                        echo "<td>{$decHabitacion->getHabNumero()}</td>";
                        echo "<td>{$decPersona->getPerNombreCompleto()}</td>";
                        echo "<td>{$decReservacion->getResFechaEntrada()}</td>";
                        echo "<td>{$decReservacion->getResFechaSalida()}</td>";
                        echo "<td><button type='button' class='btn btn-xs btn-success' onClick='editar({$decReservacion->getResId()})'><span class='glyphicon glyphicon-edit'></span> Editar</button></td>";
                        echo "</tr>";
                    }
                }
                ?>
            </tbody>
        </table>
    </div>
</div>
<div id="divSecContent">
</div>

<script>
    $(document).ready(function () {
        /* DATATABLE */
        $("#tableList").dataTable();

        /* AUTOCOMPLETE */
        $("#inputCliente").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "post",
                    url: "<?php echo url_for("registrar_habitacion/getClientes"); ?>",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#inputCliente").attr("valueId", ui.item.id);
            },
            autoFocus: true,
            minLength: 2
        });

        /* LISTENER */
        $("#buttonFiltrar").click(function () {
            filtrar();
        });
    });

    function filtrar() {
        $("#divData").html("<center><img src='<?php echo image_path("preloader.gif"); ?>'></center>");

        var inputEstado = $("#inputEstado option:selected").val();
        var clienteIdValue = $("#inputCliente").val();
        var clienteId = clienteIdValue.length == 0 ? 0 : $("#inputCliente").attr("valueId");

        $.ajax({
            type: "post",
            url: "<?php echo url_for("reservacion_lista/filtrar"); ?>",
            dataType: "html",
            data: {
                inputEstado: inputEstado,
                clienteId: clienteId
            },
            success: function (response) {
                $("#divData").html(response);
            }
        });
    }

    function editar(id) {
        $("#divMainContent").hide();
        $("#divSecContent").html("<center><img src='<?php echo image_path("preloader.gif"); ?>'></center>");

        $.ajax({
            type: "post",
            url: "<?php echo url_for("reservacion_lista/editar"); ?>",
            dataType: "html",
            data: {
                id: id
            },
            success: function (response) {
                $("#divSecContent").html(response);
            }
        });
    }

    function cancelar() {
        $("#divSecContent").empty();
        $("#divMainContent").show();
    }
</script>